<template>
  <div>
    <showDicom @setUuid="setUuid" />
     
     <el-form ref="form" :model="form"  :rules="rules"   label-width="120px" >
<el-row>
  <el-col :span='12'>  <el-form-item label="病人姓名:" prop='name' style='width:500px;'>
    <el-input v-model="form.name"></el-input>
  </el-form-item></el-col>
  <el-col :span='12'>
    <el-form-item label="性别:"  prop='sex'>
        <el-radio-group v-model="form.sex">
          <el-radio :label="1" value='1'>男</el-radio>
          <el-radio :label="2" value='2'>女</el-radio>
        </el-radio-group>
      </el-form-item>
  </el-col>
</el-row>
 <el-row>
   <el-col :span='12' style='width:500px;'>
      <el-form-item label="年龄:" prop='age'>
    <el-input v-model="form.age" ></el-input>
  </el-form-item>
   </el-col>
   <el-col :span='12' style='width:500px;' >
    <el-form-item label="检查部位:" prop='part'>
    <el-input v-model="form.part" ></el-input>
  </el-form-item>
   </el-col>
 
 </el-row>

  <el-form-item label="病人自述:" prop='patientAccount'>
    <el-input type="textarea" v-model="form.patientAccount" style='width:880px;' autosize=true></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleSubmit('form')">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
  
  </div>
</template>

<script>
import showDicom from "../../components/showDicom/showDicom_New"
export default {
  components: {
    showDicom
  },
  name: "upload",
  data () {
   
    return {
      form:{
        age:'',
        part:'',
        sex:"",
        patientAccount:'',
        name:'',
      },
     
      uuid: "",
        rules: {
          name: [
            { required: true, message: '请输入患者姓名', trigger: 'blur' },],
             age: [
            { required: true, message: '请输入患者年龄', trigger: 'blur' },
           
          ],
           sex: [
            { required: true, message: '请选择患者性别', trigger: 'blur' },
           
          ],
            part: [
            { required: true, message: '请输入患者检查部位', trigger: 'blur' },
           
          ],
             patientAccount: [
            { required: true, message: '请输入患者主诉', trigger: 'blur' },
           
          ],
           }
    }
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === "image/jpeg"
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!")
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!")
      }
      return isJPG && isLt2M
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    setUuid (id) {
      this.uuid = id
    },
     handleSubmit (form) {
      if (!this.uuid){
             this.$message({
          message: "请先提交影像文件",
          type: "error"
        })
        return
      } 

       this.$refs[form].validate( async (valid) => {
         console.log(valid,'valid')
          if (valid) {
              try {
        const result = await this.$request.obsAdd({
          patientAccount: this.form.patientAccount,
          name:this.form.name,
          sex:this.form.sex,
          part:this.form.part,
          age:this.form.age,
          uuid: this.uuid
        })
         this.$message({
          message: "影像检测报告提交成功，请耐心等待医生开具报告",
          type: "success"
        })
        console.log("result", result)
         location.reload()
       this.uuid = '',
        this.patientAccount=""
      } catch (error) {}
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    
     
    }
  }
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
h3 {
  margin: 55px 0 20px;
  font-weight: 400;
  color: #1f2f3d;
  font-size: 22px;
}
p {
  font-size: 14px;
  color: #5e6d82;
  line-height: 1.5em;
}

.submit-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.account {
  width: 480px;
}

.submit {
  float:rigth;
  margin-left: 20px;
}
</style>
